<template>
    <div>
        <Card>
            <!-- search start -->
            <div class="top">
                <div class="add">
                    <Button v-if="role < 3 " size="default" icon="md-add" type="primary" @click="add">新增分部</Button>
                </div>
            </div> <!-- end search -->

            <Table ref="table" :loading="loading" stripe :columns="columns1" :data="data1"></Table>
            <Page :total="total" :current="search.page" show-sizer show-total :page-size="search.rows" @on-page-size-change="getListByPageSize" @on-change="getListByPageNum"> </Page>
        </Card>

        <!-- modalAdd start -->
        <Modal v-model="modal" :title=" formItem.branchid? '修改分部':'新增分部'" :mask-closable="false">
            <Form :label-width="140" :model="formItem">
                <FormItem label="分部名称：">
                    <Input v-model="formItem.name" style="width:15vw"></Input>
                </FormItem>
            </Form>
            <footer class="modalFooter" slot="footer">
                <Button type="default" @click="modal=false">取消</Button>
                <Button type="primary" @click="save">保存</Button>
            </footer>
        </Modal>
    </div>
</template>
<script>
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        name: 'branch-page',
        data() {
            return {
                modal: false,
                // 新增/修改对象
                formItem: {},

                loading: false,
                // 数据总条数
                total: 0,

                // 搜索对象
                search: {
                    page: 1,
                    rows: 10
                },

                columns1: [{
                        title: '分部名称',
                        align: 'left',
                        key: 'name'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 350,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'default',
                                        icon: 'ios-eye'
                                    },
                                    style: {
                                        marginRight: '14px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            this.myClose('floor-page')
                                            this.$_changePage('floor-page', '楼层管理', {
                                                id: params.row.id
                                            })
                                        }
                                    }
                                }, '查看楼层'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'default',
                                        icon: 'md-brush',
                                        disabled: this.role > 2
                                    },
                                    style: {
                                        marginRight: '14px',
                                        width: '80px',
                                        height: '30px'
                                    },
                                    on: {
                                        click: () => {
                                            if (this.role > 2) {
                                                return false
                                            }
                                            this.formItem = {
                                                name: params.row.name,
                                                branchid: params.row.id
                                            }
                                            this.modal = true
                                        }
                                    }
                                }, '编辑'),
                                h('Poptip', {
                                        props: {
                                            confirm: true,
                                            title: '你确定要删除吗?',
                                            placement: 'top',
                                            transfer: true
                                        },
                                        on: {
                                            'on-ok': () => {
                                                if (this.role > 2) {
                                                    return false
                                                }
                                                this.deleteBranchByid(params.row.id)
                                            }
                                        }
                                    },
                                    [h(
                                        'Button', {
                                            props: {
                                                type: 'error',
                                                size: 'default',
                                                icon: 'ios-trash',
                                                disabled: this.role > 2
                                            },
                                            style: {
                                                marginRight: '14px',
                                                width: '80px',
                                                height: '30px'
                                            }
                                        },
                                        '删除'
                                    )]
                                )
                            ])
                        }
                    }

                ],
                data1: []

            }
        },
        methods: {
            ...mapMutations(['myClose']),
            ...mapGetters(['getRole']),
            // 获取分部
            getList() {
                this.loading = true
                let {
                    ...data
                } = this.search
                axios.ajax_post('admin-branch-ajax_get_branch', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.data1 = res.data.data.list
                        this.total = res.data.data.total_num

                        if (this.data1.length < 1 && this.total > 0) {
                            this.search.page = Math.ceil(this.total / this.search.rows)
                            this.getList()
                        }
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 新增
            add() {
                this.formItem = {
                    name: ''
                }
                this.modal = true
            },

            // 保存
            save() {
                let data = this.formItem
                let url = 'admin-branch-ajax_add_branch'
                // 判断新增or修改
                if (data.branchid) {
                    url = 'admin-branch-ajax_save_branch'
                }
                axios.ajax_post(url, data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.modal = false
                        this.getList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 删除分部
            deleteBranchByid(id) {
                let data = {
                    branchid: id
                }
                axios.ajax_post('admin-branch-ajax_del_branch', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: '删除成功',
                            duration: 3
                        })
                        this.getList()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            getListByPageSize(rows) {
                this.search.rows = rows
                this.getList()
            },

            getListByPageNum(page) {
                this.search.page = page
                this.getList()
            },
        },
        computed: {
            role() {
                return this.getRole()
            }
        },
        created() {
            this.getList()
        }
    }
</script>
<style lang="less" scoped>
    .top {
        margin-bottom: 14px;
    }

    .modalFooter {
        display: flex;
        justify-content: flex-end;
    }
</style>